<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        // 改数据要在父组件中改


        class App extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    str : '',       //定义的input标签里面的数据   (将input标签中输入的数据存入)
                    arr : []        //定义的列表数据的数组
                }
                //重定向this
                this.add = this.add.bind(this)
                this.change = this.change.bind(this)
                this.del = this.del.bind(this)

            }
            change(e){
                this.setState({
                    str : e.target.value
                    
                })
                // console.log(this.state.str)
            }
            add(){
                var x = this.state.arr
                // 将数据添加到x中，一起添加给arr
                // 利用头部添加或者尾部添加
                x.push(this.state.str)    //头部添加
                this.setState({
                    arr : x,
                    str : ''
                })
               
            }
            del(i){
                console.log(i)
                var x = this.state.arr
                x.splice(i,1)
                this.setState({
                    arr : x
                })
            }
            render(){
                return(
                    <div>
                        <input type="text" onChange={this.change} value={this.state.str}/>
                        <button onClick={this.add}>添加</button>    
                        <List arr={this.state.arr} foo={this.del}/>
                    </div>
                )
            }
        }
        class List extends React.Component{
            constructor(props){
                super(props)
                this.remove = this.remove.bind(this)
            }
            remove(event){
                // 改数据要在父组件中改，进行删除，子组件中修改不了，应用子向父传值
                console.log(event)
                console.log(event.target.dataset.num)
                var num = event.target.dataset.num
                // 在父组件中定义属性，子组件中发送信息
                this.props.foo(num)
            }
            render(){
                var arr = this.props.arr
                return(
                    <ul>
                        {
                            arr.map(function(value,index){
                                return <li key={index} onClick={this.remove} data-num={index}>{value}</li>
                            },this)
                        }
                        
                    </ul>
                )
            }
        }
        ReactDOM.render(
            <App/>,
            document.getElementById('app')
        )

    </script>
</body>
</html>